<template>
  <el-scrollbar always class="h-full w-full overflow-hidden">
    <div class="grid grid-flow-col gap-x-[5px]">
      <div class="" v-for="(item, i) in arrList" :key="i">
        <div
          class="border h-[34px] flex justify-center items-center"
          :class="{
            'bg-[#f6f6f6]': !(i % 2)
          }"
        >
          {{ item.name }}
        </div>
        <ul
          class="flex justify-between items-center border !border-t-0"
          v-for="(jtem, j) in item.arr"
          :key="j"
          :class="{
            'bg-[#f6f6f6]': !(i % 2)
          }"
        >
          <li class="w-[40px] flex justify-center items-center">
            <template v-if="!isNaN(jtem.Key as any)">
              <sscBall :num="jtem.Key"></sscBall>
            </template>
            <template v-else>
              {{ jtem.Key }}
            </template>
          </li>
          <li
            class="flex-1 w-0 flex justify-center items-center py-[5px] pr-[10px]"
            :class="{
              active: jtem.Val > 0
            }"
          >
            <el-input class="!w-full" size="small" readonly :model-value="jtem.Val"></el-input>
          </li>
        </ul>
      </div>
    </div>
  </el-scrollbar>
</template>
<script setup lang="ts">
import sscBall from "@/components/ball/ssc-ball.vue";
const props = withDefaults(
  defineProps<{
    list: MonitorMoTableList;
  }>(),
  {}
);
watch(
  () => props.list,
  val => {
    arrList.value = val;
  }
);
const arrList = ref<MonitorMoTableList>([]);
</script>
<style lang="scss" scoped>
.active {
  :deep() {
    .el-input {
      --el-input-bg-color: #dff7ff;
    }
  }
}
:deep() {
  .el-input__inner {
    text-align: center;
  }
}
</style>
